<template>
  <view class="container">
    <h1>饭星点点</h1>
    <image class="avatar" :src="avatarUrl" @tap="chooseAvatar"></image>
    <view class="login-btn">
      <button class="avatar-button" @tap="chooseAvatar">设置头像</button>
    </view>
    <input class="name-input" type="text" v-model="name" placeholder="请输入您的昵称" />
    <button class="bd-btn" @tap="bindMerchant">商家绑定</button>
    <button class="cancel-btn" @tap="cancel">取消绑定</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '/static/logo.png', // 默认头像路径
      name: '饭星游客' ,// 默认昵称
	  storeId:0,
	  
    };
  },
  mounted(){
	  //在程序页面DOM加载之后就会执行的代码
	  uni.login({
	    provider: 'weixin',
	    success: (loginRes) => {
	      const code = loginRes.code;
	      // 发送 code 和用户信息到服务器进行绑定
	      uni.request({
	        url: 'http://zhaoyang.nat300.top/find', // 替换为你的服务器地址
	        method: 'POST',
	        data: {
	          code: code, // 微信提供的临时登录凭证
	        },
	        header: {
	          'content-type': 'application/json' // 设置请求头，默认值
	        },
	        success: (res) => {
	      	 console.log(res.data)
	          if (res.statusCode === 200 && res.data != 0) 
			  {
				  let id = res.data; 
				  //跳转到个人主页
	           uni.navigateTo({
	           	url:`/pages/home/home?status=${id}&storeId=1`
	           })
	          } else {
	            uni.showToast({
	              title: '用户未绑定过',
	              icon: 'none',
	            });
	          }
	        },
	        fail: () => {
	          uni.showToast({
	            title: '网络错误，请检查网络连接',
	            icon: 'none'
	          });
	        }
	      });
	    },
	    fail: (err) => {
	      console.error('登录失败：', err);
	      uni.showToast({
	        title: '登录失败，请重试',
	        icon: 'none'
	      });
	    }
	  });
  },

  methods: {
    chooseAvatar() {
      // 显示一个动作面板让用户选择设置头像的方式
      const itemList = ['授权微信头像', '从相册中选择', '拍照'];
      uni.showActionSheet({
        itemList: itemList,
        success: (res) => {
          // 根据用户的选择执行相应的操作
          if (res.tapIndex === 0) {
            this.authorizeWeChatAvatar(); // 如果选择了授权微信头像，则调用此方法
          } else if (res.tapIndex === 1) {
            this.chooseFromAlbum(); // 如果选择了从相册中选择，则调用此方法
          } else if (res.tapIndex === 2) {
            this.takePhoto(); // 如果选择了拍照，则调用此方法
          }
        },
        fail: () => {
          console.log('用户点击了取消');
        }
      });
    },

    chooseFromAlbum() {
      // 从相册中选择图片作为头像
      uni.chooseImage({
        count: 1, // 只允许选择一张图片
        sizeType: ['original', 'compressed'], // 可以选择原图或压缩后的图片
        sourceType: ['album'], // 只能从相册选择
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0]; // 更新头像URL
        }
      });
    },

    takePhoto() {
      // 使用相机拍摄照片作为头像
      uni.chooseImage({
        count: 1, // 只允许拍摄一张照片
        sizeType: ['original', 'compressed'], // 可以选择原图或压缩后的照片
        sourceType: ['camera'], // 只能使用相机拍摄
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0]; // 更新头像URL
        }
      });
    },

    authorizeWeChatAvatar() {
      // 请求用户授权获取其微信头像和昵称信息
      uni.getUserProfile({
        desc: '用于完善用户资料', // 必填项，说明获取用户信息的目的
        success: (res) => {
          if (res.userInfo) {
            let userInfo = res.userInfo;
            this.avatarUrl = userInfo.avatarUrl; // 更新本地头像URL
            this.nikeName = userInfo.nickName; // 更新本地昵称
          } else {
            uni.showToast({
              title: '用户拒绝了授权',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('获取用户信息失败：', err);
          uni.showToast({
            title: '获取用户信息失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    async syncUserInfoToServer(code) {
      const that = this;
    
      // 将获取到的 code 和用户信息发送到后端服务器进行处理
      uni.request({
        url: 'http://zhaoyang.nat300.top/login', // 替换为你的服务器地址
        method: 'POST',
        data: {
          code: code, // 微信提供的临时登录凭证
          avatarUrl: that.avatarUrl, // 用户头像URL
          name: that.name // 用户昵称
        },
        header: {
          'content-type': 'application/json' // 设置请求头，默认值
        },
        success: (response) => {
          if (response.statusCode === 200 && response.data) {
            // console.log("返回的数据：", response.data); // 使用 JSON.stringify 或直接传入对象
    
            that.id = response.data.id;
            that.storeId = response.data.storeId;
			console.log(that.id);
			console.log(that.storeId);
    
            // 商家绑定逻辑
            uni.showModal({
              title: '商家已绑定成功',
              content: '点击确定返回首页',
              showCancel: false,
              confirmText: '确定',
              success(modalResponse) { // 使用 modalResponse 避免混淆
                if (modalResponse.confirm) {
                  // 成功就跳转页面
                  console.log(that.id, that.storeId); // 使用 that 而不是 this
                  that.navigateToHomePage(that.id, that.storeId);
                }
              }
            });
    
            // 成功后可以更新本地状态或其他操作
          } else {
            uni.showToast({
              title: '绑定失败，请重试',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络错误，请检查网络连接',
            icon: 'none'
          });
        }
      });
	  },
    bindMerchant() {
		// 调用微信登录接口获取 code
		uni.login({
		  provider: 'weixin',
		  success: (loginRes) => {
		    const code = loginRes.code;
		    // 发送 code 和用户信息到服务器进行绑定
		    this.syncUserInfoToServer(code);
		  },
		  fail: (err) => {
		    console.error('登录失败：', err);
		    uni.showToast({
		      title: '登录失败，请重试',
		      icon: 'none'
		    });
		  }
		});
    },
    navigateToHomePage(id,storeId) {
      // 导航到首页
      uni.navigateTo({
        url: `/pages/home/home?status=${id}&storeId=${storeId}`
      });
    },
    cancel() {
      // 返回上一页
      uni.navigateBack({
        delta: 1
      })
    }
  }
  }
</script>
<style scoped>
/* 样式保持不变 */
</style>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  background-color: #f8f8f8;
}

.container h1 {
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 25px;
}

.login-btn {
  width: 60%;
  margin-bottom: 20px;
  color: white;
  background-color: #1aad19;
  border: none;
  padding: 1px;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
}

.avatar {
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border-radius: 50%;
}

.name-input {
  width: 70%;
  padding: 2px;
  margin-bottom: 45px;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 4px;
  font-size: 20px;
  text-align: center;
}

.bd-btn {
  width: 70%;
  padding: 1px;
  color: white;
  background-color: #1aad19;
  margin: 5px;
}

.cancel-btn {
  width: 70%;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 1px;
  border-radius: 4px;
  margin: 5px;
}
</style>